import React, { Component } from 'react';
import { NavBar } from 'antd-mobile'
import { Button,Toast } from 'antd-mobile'
import "./phone.css"
import service from '../../../api';


class phone extends Component {
    constructor(){
        super()
        this.state={
            // phonelist:{
                phone:''
            // }
        }
    }
    onChange(e){
        this.setState({phone: e.target.value })
    }
    
    async nextToCode(){
        // console.log(this.state.phone);
        var res = await service.user.user_docheckphone({tel:this.state.phone} )
        console.log(res);
        if(res.data.code == 200){
            // this.setState({phonelist:res.data.data})
            this.props.history.push({pathname:'/register/code',state:{phone:this.state.phone} })
            // console.log(this.state.phone);
            Toast.show({content:'继续注册'})
        }else{
            Toast.show({content:'该用户已被注册'})
        }
    }
    
    render() {
        return (
            <div className='myphone'>
               <NavBar onBack={()=>{this.back()}}>注册手机号</NavBar> 
               <div className="block">
                    <input name='phone' type="text" placeholder='请输入手机号' value={this.state.phone || ''} onChange={(e)=>{ this.onChange(e) }}/>
                </div>
                <Button block color='warning' size='middle' shape='rounded'onClick={()=>{ this.nextToCode() }}>下一步</Button>
            </div>
        );
    }
    async back(){
        this.props.history.go(-1);
    }
}

export default phone;